import "./index.scss";

import React, { ReactNode, useEffect } from "react";

import { Icon } from "../Icon";
import { RenderDom } from "../../types/common";
import className from "classnames";
import { v4 as uuid } from "uuid";

export interface ButtonProps {
  /** 按钮尺寸 */
  size?: "small" | "default" | "large";
  /** 按钮类型 */
  type?: "primary" | "default" | "dashed" | "text" | "link";
  /** 图标位置 */
  iconPosition?: "start" | "end";
  /** 按钮是否危险 */
  danger?: boolean;
  /** 加载 */
  loading?: boolean;
  /** 背景颜色 */
  backgroundColor?: string;
  /** 文案颜色 */
  color?: string;

  /** 点击事件 */
  onClick?: () => void;
  /** 图标 */
  icon?: React.ReactNode;

  /** 按钮内文案 */
  children?: RenderDom;
  [key: string]: any;
}

/** 各种各样的按钮 */
export const LfButton = ({
  backgroundColor,
  size,
  color,
  type,
  danger,
  children,
  iconPosition,
  icon,
  loading,
  ...props
}: ButtonProps) => {
  const id = uuid();
  const buttonClassName = className([
    "react-button",
    {
      "button-default": !type,
      [`button-${type}`]: type,
      "button-danger": danger,
      "button-large": size === "large",
      "button-small": size === "small",
    },
  ]);
  const style = { backgroundColor: "", color: "", border: "" };
  switch (type) {
    case "primary": {
      if (backgroundColor) {
        style.backgroundColor = backgroundColor;
      }
      break;
    }
    case "default": {
      if (backgroundColor) {
        style.border = `1px solid ${backgroundColor}`;
      }
      break;
    }
    case "dashed": {
      if (backgroundColor) {
        style.border = `1px dashed ${backgroundColor}`;
      }
      break;
    }
  }
  if (color) {
    style.color = color;
  }
  const getChildren = (): ReactNode | ReactNode[] => {
    const iconClassName = className({
      "icon-right": iconPosition === "end",
      "icon-left": iconPosition === "start" || !iconPosition,
      loading: loading,
    });
    if (!icon)
      return [
        loading ? (
          <div className={iconClassName} key={0}>
            <Icon name="button-loading" />
          </div>
        ) : null,
        children as ReactNode,
      ];
    switch (iconPosition) {
      case "end": {
        return [
          children as ReactNode,

          <div className={iconClassName} key={1}>
            {loading ? <Icon name="button-loading" /> : icon}
          </div>,
        ];
      }
      case "start": {
        return [
          <div className={iconClassName} key={0}>
            {loading ? <Icon name="button-loading" /> : icon}
          </div>,
          children as ReactNode,
        ];
      }
      default: {
        return [
          <div className={iconClassName} key={0}>
            {loading ? <Icon name="button-loading" /> : icon}
          </div>,
          children as ReactNode,
        ];
      }
    }
  };
  return (
    <button
      id={id}
      className={buttonClassName}
      type="button"
      style={style}
      {...props}
    >
      {getChildren()}
    </button>
  );
};
